<template>
  <app-page :login="false">
    <mxp-refresh-page ref="mxpRefreshPageRef" :queryData="queryData">
      <view class="person-vessel-box" style="background: #fcd834">
        <view class="circle-bg-box"><view class="circle-bg"></view></view>
        <view class="head-vessel">
          <view class="head-box">
            <!-- 头像  -->
            <view class="img-box" @click="openPersonalCenterClick">
              <mxp-image
                width="60px"
                height="60px"
                borderRadius="40px"
                :src="userInfo?.avatar || '/static/images/logo1.svg'"
                errorSrc="/static/images/logo1.svg"
              ></mxp-image>
            </view>
            <view class="name-vessel">
              <!-- 昵称和签到  -->
              <view class="name-box">
                <view class="name" @click="openPersonalCenterClick">
                  {{ userInfo?.nickname || '未登录' }}
                </view>
              </view>
              <!-- VIP等级或提示文字  -->
              <view class="slogan-box">
                <view v-if="loginState && userInfo?.isVip === 1" class="grade-vessel-box">
                  <view class="grade-box">
                    <image class="img" src="/static/images/tab-bar/ico_star.svg"></image>
                    <text class="grade">{{ userInfo.vipLevel }}</text>
                  </view>
                  <text class="expire">{{ userInfo.vipExpireTime }}到期</text>
                </view>
                <text class="slogan">{{ userInfo ? `UID：DS${userInfo.userId}` : '登录享更多权益' }}</text>
              </view>
            </view>
          </view>
          <view style="z-index: 3; padding: 6px" @click="openPersonalCenterClick">
            <image style="width: 20px; height: 20px" src="/static/images/tab-bar/ico_setting.svg" mode="scaleToFill"></image>
          </view>
        </view>
        <!-- vip -->
        <view class="vip-vessel">
          <image
            style="position: absolute; top: 0; width: 670rpx; height: 120rpx; border-radius: 10px 10px 0 0"
            src="/static/images/tab-bar/vip_bg.jpg"
          ></image>
          <image style="position: absolute; top: 119rpx; width: 113rpx; height: 20rpx" src="/static/images/tab-bar/vip_bg_arrows.png"></image>
          <view class="vip-box" @click="openPayInfoVipClick">
            <view style="display: flex; flex-direction: column; justify-content: flex-start">
              <view>
                <text class="vip-text1">VIP</text>
                <text style="margin-left: 4px; font-size: 18px; font-weight: bold; line-height: 18px; color: #fe9b70">专享</text>
              </view>
              <view>
                <text style="font-size: 12px; color: #9b9ba7">{{ userInfo?.isVip === 1 ? '' : '开通' }}VIP·全场可</text>
                <text style="font-size: 12px; color: #fc996c">免费</text>
                <text style="font-size: 12px; color: #9b9ba7">观看</text>
              </view>
            </view>
            <view class="butt-box">
              <text style="font-size: 16px; font-weight: bold; line-height: 16px; color: #4c2804">立即{{ userInfo?.isVip === 1 ? '续费' : '开通' }}</text>
              <view class="icon-bg">
                <mxp-icon name="youjiantou" size="8px" color="#FDA47D"></mxp-icon>
              </view>
            </view>
          </view>
        </view>
        <view class="middle-action-box" :style="{ background: defThemeColor.fill }">
          <view class="action-list">
            <view class="action" @click="openBingeWatchRecordsClick">
              <image class="ico" src="/static/images/tab-bar/ico_top001.svg"></image>
              <text class="text" :style="{ color: defThemeColor.text }">我的追剧</text>
            </view>
            <view class="action" @click="openPayVideoRecordsClick">
              <image class="ico" src="/static/images/tab-bar/ico_top003.svg"></image>
              <text class="text" :style="{ color: defThemeColor.text }">已购剧集</text>
            </view>
            <view class="action" @click="openWatchRecordsClick">
              <image class="ico" src="/static/images/tab-bar/ico_top002.svg"></image>
              <text class="text" :style="{ color: defThemeColor.text }">观看记录</text>
            </view>
            <view class="action" @click="openDiscountCouponListClick">
              <image class="ico" src="/static/images/tab-bar/ico_top004.svg"></image>
              <text class="text" :style="{ color: defThemeColor.text }">券码包</text>
            </view>
          </view>
        </view>
      </view>
      <view class="my-serve-box" :style="{ background: defThemeColor.fill }">
        <view class="title-box">
          <text class="title" :style="{ color: defThemeColor.text }">我的服务</text>
        </view>
        <view class="serve-list">
          <view class="serve-item" :style="{ background: defThemeColor.fill2 }" @click="openSignInClick">
            <view class="icon-box" style="background: linear-gradient(180deg, #fd7f74 0%, #fe4a6f 100%)">
              <image class="icon" src="/static/images/tab-bar/ico_list201.svg" mode="scaleToFill"></image>
            </view>
            <view class="info-box">
              <view class="name-box">
                <text class="name" :style="{ color: defThemeColor.text }">我的签到</text>
                <mxp-icon size="9px" name="youjiantou" :color="defThemeColor.border"></mxp-icon>
              </view>
              <text class="explain" :style="{ color: defThemeColor.text3 }">海量K币狂撒中</text>
            </view>
          </view>
          <view class="serve-item" :style="{ background: defThemeColor.fill2 }" @click="openPayInfoDiamondClick">
            <view class="icon-box" style="background: linear-gradient(180deg, #fee28a 0%, #ff9c03 100%)">
              <image class="icon" src="/static/images/tab-bar/ico_list202.svg" mode="scaleToFill"></image>
            </view>
            <view class="info-box">
              <view class="name-box">
                <text class="name" :style="{ color: defThemeColor.text }">我的K币</text>
                <mxp-icon size="9px" name="youjiantou" :color="defThemeColor.border"></mxp-icon>
              </view>
              <text class="explain" :style="{ color: defThemeColor.text3 }">余额:{{ userInfo ? `${userInfo.virtualCoins || 0}` : '--' }}</text>
              <text v-if="loginState" class="explain" :style="{ color: defThemeColor.primary, marginLeft: '4px' }">充值</text>
            </view>
          </view>
        </view>
        <mxp-line margin="15px 0px"></mxp-line>
        <view v-if="userInfo?.isPartner === 1" key="view-1" class="launch-box" @click="openApplyCooperationClick">
          <view class="rigth-box">
            <text class="launch-title" :style="{ color: defThemeColor.text }">我有片源要投放</text>
          </view>
          <view class="left-box">
            <image class="launch-icon" src="/static/images/tab-bar/ico_list203.png" mode="scaleToFill"></image>
            <text class="launch-text" :style="{ color: defThemeColor.text3 }">我有片源要投放</text>
            <mxp-icon size="9px" name="youjiantou" :style="{ color: defThemeColor.border }"></mxp-icon>
          </view>
        </view>
        <view v-else key="view-2" class="launch-box" @click="openCooperationEarningsClick">
          <view class="rigth-box">
            <text class="launch-title" :style="{ color: defThemeColor.text }">投放收益</text>
          </view>
          <view class="left-box">
            <image class="launch-icon" src="/static/images/tab-bar/ico_list203.png" mode="scaleToFill"></image>
            <text class="launch-text" :style="{ color: defThemeColor.text3 }">查看收益</text>
            <mxp-icon size="9px" name="youjiantou" :style="{ color: defThemeColor.border }"></mxp-icon>
          </view>
        </view>
      </view>
      <mxp-list :cusStyle="{ background: '#ffffff', padding: '0 10px', marginTop: '15px', overflow: 'hidden' }" :listBorderColor="false">
        <mxp-list-item :arrow="true" :hover="true" @click="openPayRecordsClick">
          <mxp-list-item-info icon="/static/images/tab-bar/ico_list101.svg" title="充值记录"></mxp-list-item-info>
        </mxp-list-item>
        <mxp-list-item :arrow="true" :hover="true" @click="openConsumptionRecordsClick">
          <mxp-list-item-info icon="/static/images/tab-bar/ico_list102.svg" title="消费记录"></mxp-list-item-info>
        </mxp-list-item>
        <!-- #ifdef MP-TOUTIAO -->
        <button class="item-button" open-type="im" :data-im-id="imID" @error="openError">
          <mxp-list-item :borderColor="false" :arrow="true" :hover="true">
            <mxp-list-item-info icon="/static/images/tab-bar/ico_list103.svg" title="联系客服" info="周一至周六(9:00-18:00)"></mxp-list-item-info>
          </mxp-list-item>
        </button>
        <!-- #endif -->
        <!-- #ifndef MP-TOUTIAO -->
        <mxp-list-item :borderColor="false" :arrow="true" :hover="true">
          <mxp-list-item-info icon="/static/images/tab-bar/ico_list103.svg" title="电话客服" info="周一至周六(9:00-18:00)"></mxp-list-item-info>
        </mxp-list-item>
        <!-- #endif -->
      </mxp-list>
      <mxp-list :cusStyle="{ background: '#ffffff', padding: '0 10px', marginTop: '15px' }" :listBorderColor="false">
        <mxp-list-item :arrow="true" :hover="true" @click="openPrivacyAgreementClick">
          <mxp-list-item-info icon="/static/images/tab-bar/ico_list001.svg" title="隐私政策"></mxp-list-item-info>
        </mxp-list-item>
        <mxp-list-item :arrow="true" :hover="true">
          <mxp-list-item-info icon="/static/images/tab-bar/ico_list002.svg" title="客服电话" :info="serviceTel" @click="openTel"></mxp-list-item-info>
        </mxp-list-item>
        <mxp-list-item :borderColor="false">
          <mxp-list-item-info icon="/static/images/tab-bar/ico_list003.svg" title="编译版本" :info="appVersions"></mxp-list-item-info>
        </mxp-list-item>
      </mxp-list>
      <view style="height: 40px"></view>
    </mxp-refresh-page>
  </app-page>
</template>

<script setup lang="ts">
  import { computed } from 'vue';
  import MxpImage from '@/mxp-ui/mxp-image/mxp-image.vue';
  import AppPage from '@/components/app-page/app-page.vue';
  import MxpList from '@/mxp-ui/mxp-list/mxp-list.vue';
  import MxpListItem from '@/mxp-ui/mxp-list-item/mxp-list-item.vue';
  import MxpListItemInfo from '@/mxp-ui/mxp-list-item-info/mxp-list-item-info.vue';
  import { useAppStore } from '@/pinia/app';
  import { onPullDownRefresh, onReady } from '@dcloudio/uni-app';
  import { type UserInfo, queryBaseDictInfoAxios } from '@/api/user';
  import { autoLogin, updateUserInfo } from '@/utils/page/user';
  import type { ButtonOnErrorEvent } from 'mxp-uni-types';
  import { defThemeColor } from '@/mxp-ui/mxp-tool/theme/theme';
  // #ifdef MP-TOUTIAO
  import { getAppInfo } from '@/config/mp-config';
  import type { TtMpConfig } from '@/config/mp/tt';
  // #endif
  import MxpIcon from '@/mxp-ui/mxp-icon/mxp-icon.vue';
  import MxpLine from '@/mxp-ui/mxp-line/mxp-line.vue';
  import MxpRefreshPage, { type Ins } from '@/mxp-ui/mxp-refresh-page/mxp-refresh-page.vue';
  import { useRefresh } from '@/mxp-ui/mxp-tool/hooks/useHooksRefresh.ts';
  import mxpGetSysInfoStore from '@/mxp-ui/mxp-tool/store/mxp-store-sys-info';

  const appVersions = __APP_VERSIONS__;
  const appStore = useAppStore();
  const userInfo = computed<UserInfo | undefined>(() => appStore.userInfo);
  const loginState = computed(() => appStore.loginState);
  const serviceTel = computed(() => appStore.baseDictInfo?.APP_CUSTOMER_TEL || '');
  // #ifdef MP-TOUTIAO
  const appInfo = getAppInfo() as TtMpConfig | undefined;
  const imID = appInfo?.iMNumber;
  // #endif

  const { mxpRefreshPageRef } = useRefresh(onPullDownRefresh);
  const sys = mxpGetSysInfoStore().getSysInfo();
  onReady(() => {
    // #ifdef MP-WEIXIN || MP-KUAISHOU
    setTimeout(() => {
      sys.value.platform !== 'ios' && uni.setBackgroundColor({ backgroundColor: '#FCD834' });
    }, 1000);
    // #endif
  });

  /** 打开个人中心 */
  function openPersonalCenterClick() {
    if (loginState.value) {
      uni.navigateTo({ url: '/pages/personal/personal-center/personal-center' });
    } else {
      uni.navigateTo({ url: '/pages/account/login/login' });
    }
  }
  /** 打开隐私协议 */
  function openPrivacyAgreementClick() {
    uni.navigateTo({ url: '/pages/account/privacy-agreement/privacy-agreement' });
  }

  /** 打开签到页面 */
  function openSignInClick() {
    if (loginState.value) {
      uni.navigateTo({ url: '/pages/personal/sign-in/sign-in' });
    } else {
      uni.navigateTo({ url: '/pages/account/login/login' });
    }
  }

  /** 打开我的追剧 */
  function openBingeWatchRecordsClick() {
    if (loginState.value) {
      uni.navigateTo({ url: '/pages/personal/chasing-records/chasing-records' });
    } else {
      uni.navigateTo({ url: '/pages/account/login/login' });
    }
  }

  /** 打开观看记录 */
  function openWatchRecordsClick() {
    if (loginState.value) {
      uni.navigateTo({ url: '/pages/personal/watch-records/watch-records' });
    } else {
      uni.navigateTo({ url: '/pages/account/login/login' });
    }
  }
  /** 已购剧集 */
  function openPayVideoRecordsClick() {
    if (loginState.value) {
      uni.navigateTo({ url: '/pages/personal/pay-drama-records/pay-drama-records' });
    } else {
      uni.navigateTo({ url: '/pages/account/login/login' });
    }
  }
  /** 打开消费记录 */
  function openConsumptionRecordsClick() {
    if (loginState.value) {
      uni.navigateTo({ url: '/pages/personal/consumption-records/consumption-records' });
    } else {
      uni.navigateTo({ url: '/pages/account/login/login' });
    }
  }

  /** 打开券码包页面 */
  function openDiscountCouponListClick() {
    if (loginState.value) {
      uni.navigateTo({ url: '/pages/rest/discount-coupon-list/discount-coupon-list' });
    } else {
      uni.navigateTo({ url: '/pages/account/login/login' });
    }
  }

  /** 打开充值记录 */
  function openPayRecordsClick() {
    if (loginState.value) {
      uni.navigateTo({ url: '/pages/personal/savings-records/savings-records' });
    } else {
      uni.navigateTo({ url: '/pages/account/login/login' });
    }
  }
  /** 申请成为合作者 */
  function openApplyCooperationClick() {
    if (loginState.value) {
      uni.navigateTo({ url: '/pages/cooperation/apply-cooperation/apply-cooperation' });
    } else {
      uni.navigateTo({ url: '/pages/account/login/login' });
    }
  }

  /** 合作者收益 */
  function openCooperationEarningsClick() {
    if (loginState.value) {
      uni.navigateTo({ url: '/pages/cooperation/cooperation-earnings/cooperation-earnings' });
    } else {
      uni.navigateTo({ url: '/pages/account/login/login' });
    }
  }

  /** 升级VIP */
  function openPayInfoVipClick() {
    if (loginState.value) {
      uni.navigateTo({ url: '/pages/personal/pay-info-vip/pay-info-vip' });
    } else {
      uni.navigateTo({ url: '/pages/account/login/login' });
    }
  }

  /** K币充值 */
  function openPayInfoDiamondClick() {
    if (loginState.value) {
      uni.navigateTo({ url: '/pages/personal/pay-info-diamond/pay-info-diamond' });
    } else {
      uni.navigateTo({ url: '/pages/account/login/login' });
    }
  }

  /** 拨打电话 */
  function openTel() {
    uni.makePhoneCall({ phoneNumber: serviceTel.value });
  }

  /** 加载数据 */
  async function queryData(ins?: Ins) {
    try {
      try {
        // 如果未登录先静默登录
        !loginState.value && (await autoLogin());
      } catch (error) {}
      const res = await Promise.all([updateUserInfo(true), queryBaseDictInfoAxios()]);
      const dictRes = res[1];
      appStore.setBaseDictInfo(dictRes.data);
      ins?.setSuccess();
    } catch (error) {
      ins?.setSuccess();
    }
  }

  /** 打开客服失败 */
  function openError(e: ButtonOnErrorEvent) {
    console.error('打开客服失败====', e);
  }
</script>

<style scoped lang="scss">
  .person-vessel-box {
    position: relative;
    width: 100vw;
    padding-top: 10px;
    overflow-x: hidden;

    .user-bg {
      position: absolute;
      top: 20px;
      right: 0;
      z-index: 0;
      width: 310rpx;
      height: 120rpx;
    }

    .head-vessel {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: flex-start;
      padding: 20px;

      .head-box {
        position: relative;
        z-index: 1;
        display: flex;
        flex: 1;
        flex-flow: row nowrap;
        place-content: center flex-start;
        align-items: center;
        min-width: 0;

        .img-box {
          padding: 0;
          margin-right: 10px;
          border: 4px solid #ee9e00;
          border-radius: 50%;
        }
        // 名称 和 签到
        .name-vessel {
          .name-box {
            display: flex;
            flex-flow: row nowrap;
            place-content: center flex-start;
            align-items: center;
            //margin-bottom: 4px;

            .name {
              max-width: 160px;
              height: 24px;
              overflow: hidden;
              font-size: 16px;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          // 登陆注册文字
          .slogan-box {
            //margin-top: 2px;

            .slogan {
              display: block;
              padding: 2px 8px;
              overflow: hidden;
              font-size: 12px;
              line-height: 20px;
              color: #564300;
              text-align: left;
              text-overflow: ellipsis;
              white-space: nowrap;
              background: #e2c200;
              border-radius: 4px;
              opacity: 0.7;
              margin-top: 6px;
            }
          }
          // VIP等级
          .grade-vessel-box {
            display: flex;
            flex-flow: row nowrap;
            place-content: center flex-start;
            align-items: center;
            min-width: 0;
            // padding-bottom: 5px;

            .grade-box {
              position: relative;
              display: flex;
              flex-flow: row nowrap;
              place-content: center flex-start;
              align-items: center;
              min-width: 0;
              height: 15px;
              padding: 0 8px;
              padding-left: 10px;
              margin-top: 4px;
              margin-left: 10px;
              font-size: 12px;
              line-height: 16px;
              color: #ffffff;
              background: linear-gradient(to right, #fa6661, #f76b1c);
              border-radius: 0 10px 10px 0;

              .img {
                position: absolute;
                left: -10px;
                z-index: 2;
                width: 20px;
                height: 20px;
              }
            }

            .expire {
              margin-left: 4px;
              font-size: 12px;
              color: #564300;
              position: relative;
              top: 1px;
            }
          }
        }
      }
    }

    .vip-vessel {
      position: relative;
      z-index: 4;
      display: flex;
      justify-content: center;
      height: 120rpx;
      margin-top: 20px;

      .vip-box {
        z-index: 2;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 670rpx;
        height: 120rpx;
        padding: 10px 15px;

        .vip-text1 {
          display: inline-flex;
          padding: 0 6px;
          font-size: 18px;
          font-weight: bold;
          line-height: 18px;
          color: #393849;
          background: linear-gradient(70deg, #f6d9ca 0%, #fe9b70 100%);
          border-radius: 2px;
          transform: skew(-8deg);
        }

        .butt-box {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 96px;
          height: 36px;
          padding: 0 6px;
          background: linear-gradient(129deg, #f6d9ca 0%, #fe9b70 100%);
          border-radius: 20px;

          .icon-bg {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 16px;
            height: 16px;
            margin-left: 4px;
            background: #393849;
            border-radius: 50%;
          }
        }
      }
    }

    .middle-action-box {
      position: relative;
      z-index: 2;
      box-sizing: border-box;
      width: 100%;
      padding: 20px 15px;
      padding-top: 30px;

      .action-list {
        box-sizing: border-box;
        display: flex;
        flex-flow: row nowrap;
        place-content: center space-between;
        align-items: center;
        width: 100%;
        min-width: 0;
        padding: 0 15px;

        .action {
          display: flex;
          flex-flow: column nowrap;
          place-content: center center;
          align-items: center;

          .ico {
            width: 32px;
            height: 32px;
          }

          .text {
            display: block;
            margin-top: 5px;
            font-size: 13px;
            font-weight: normal;
            font-stretch: normal;
            text-align: center;
          }
        }
      }
    }

    .circle-bg {
      position: absolute;
      top: 0;
      right: -60px;
      z-index: 1;
      width: 200px;
      height: 200px;
      background: linear-gradient(90deg, rgb(250, 193, 21), rgb(255, 235, 53));
      border-radius: 50%;
      opacity: 0.54;

      &:after {
        position: absolute;
        bottom: -15px;
        left: 60px;
        z-index: 5;
        width: 130px;
        height: 130px;
        content: '';
        background: linear-gradient(90deg, #ecb922, #ffab35);
        border-radius: 50%;
        opacity: 0.44;
      }

      &:before {
        position: absolute;
        right: 130px;
        bottom: -30px;
        z-index: 3;
        width: 129px;
        height: 100px;
        content: '';
        background: linear-gradient(90deg, #ec8e22, #ffbf35);
        border-radius: 50%;
        opacity: 0.24;
      }
    }
  }

  .my-serve-box {
    padding: 15px;
    margin-top: 15px;

    .title-box {
      padding: 10px 0;

      .title {
        font-size: 16px;
        font-weight: bold;
      }
    }

    .serve-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 15px;
      margin-top: 10px;

      .serve-item {
        display: flex;
        flex: 1;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 18px 8px;
        border-radius: 10px;

        .icon-box {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          width: 42px;
          height: 42px;
          border-radius: 50%;

          .icon {
            width: 24px;
            height: 24px;
          }
        }

        .info-box {
          margin-left: 10px;

          .name-box {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;

            .name {
              margin-right: 4px;
              font-size: 14px;
              font-weight: bold;
            }
          }
        }

        .explain {
          font-size: 12px;
        }
      }
    }

    .launch-box {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 5px 0;

      .rigth-box .launch-title {
        font-size: 14px;
        font-weight: bold;
      }

      .left-box {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;

        .launch-icon {
          width: 18px;
          height: 18px;
          margin-right: 4px;
        }

        .launch-text {
          font-size: 14px;
        }
      }
    }
  }

  .item-button {
    display: block;
    width: 100%;
    padding: 0;
    background: #ffffff;
    border: none;
    box-shadow: none;

    &:after {
      border: none;
      box-shadow: none;
    }
  }
</style>
